<template>
  <div class="tableBox">
    <!-- tabs  start -->
    <div class="all_order_top">
      <ul class="tabs">
        <li v-for="(item, index) in tabs" :key="index" @click="handelClickTabs(item)">
          {{item.tabName}}
          <div v-show="item.show"></div>
        </li>
      </ul>
      <!-- tabs  end -->
      <!--  按钮组 start -->
      <div class="buttonGroup">
        <!-- <el-button class="pad" @click="sendclick()" v-if='false'>批量发货</el-button> -->
        <el-button class="pad" @click="exportClick()">批量导出</el-button>
        <el-button class="pad" @click="printsClick()">批量打印</el-button>
      </div>
    </div>
    <!--  按钮组 end -->
    <!-- 表头 start -->
    <ul class="all_order_header FSC">
      <li class="all_order_check">
        <el-checkbox v-model="checked"></el-checkbox>
      </li>
      <li class="all_order_goods">商品</li>
      <li class="all_order_price">单价</li>
      <li class="all_order_number">数量</li>
      <li class="all_order_person">收货人</li>
      <li class="all_order_total">订单总价</li>
      <li class="all_order_status">订单状态</li>
      <li class="all_order_handel">操作</li>
    </ul>
    <!-- 表头 end -->
    <!-- 内容 start -->
    <div
      class="all_order_content"
      v-for="(order, index) in list"
      :key="index"
      v-show="list.length>0"
    >
      <ul class="all_order_cpntent_header FSC">
        <li class="all_order_child_check">
          <el-checkbox v-model="checked"></el-checkbox>
        </li>
        <li class="all_order_date">{{order.createTime}}</li>
        <li class="all_order_orderId">订单号：{{order.orderId}}</li>
        <li class="all_order_seller">{{order.sellerId}}</li>
        <li class="all_order_detail" @click="handelDetail(order.orderId)">订单详情</li>
      </ul>
      <div class="all_order_content_Box FSC">
        <div class="all_order_content_alone FSC">
          <div
            class="all_order_content_v FSC"
            v-for="(item, itemIndex) in order.orderItemList"
            :key="itemIndex"
          >
            <div class="all_order_img">
              <img :src="item.picPath | picPathFil" alt />
            </div>

            <div class="all_order_title_box">
              <div class="all_order_title">{{item.title}}</div>
            </div>
            <div class="all_order_unit_price overflowEllipsis">{{item.price}}</div>

            <div class="all_order_unit_number">{{item.num}}</div>
          </div>
        </div>

        <div class="all_order_content_comment FSC">
          <div class="all_order_person_info">
            <div class="overflowEllipsis">{{order.receiver}}</div>
            <div class="overflowEllipsis">{{order.receiverMobile}}</div>
          </div>
          <div class="all_order_total_price">
            <div class="overflowEllipsis">{{order.payment}}</div>
            <div class="all_order_payType">{{order.paymentType | payTypeFil}}</div>
          </div>
          <div class="all_order_total_status">{{order.status | statusFil}}</div>
          <div class="all_order_handel_button">
            <el-button
              class="baseBut bg_base center_but"
              @click="editPriceClick(order)"
              v-show="order.status==1"
            >修改价格</el-button>
            <el-button
              class="baseBut bg_base center_but"
              @click="cancelPriceClick(order)"
              v-show="order.status==1"
            >取消订单</el-button>
            <!-- <el-button
              class="baseBut bg_base center_but"
              @click="cancelPriceClick(order)"
              v-show="order.status==2"
            >取消订单</el-button>-->
            <el-button
              class="baseBut bg_base center_but"
              @click="setShipClick(order)"
              v-show="order.status==3 || order.status== 2"
            >设置发货</el-button>
            <el-button
              class="baseBut bg_base center_but"
              @click="editPriceClick(order)"
              v-show="order.status==4"
            >物流信息</el-button>
            <el-button
              class="baseBut bg_base center_but"
              @click="printClick(order)"
              v-show="order.status==4"
            >打印发货单</el-button>
            <el-button
              class="baseBut bg_base center_but"
              @click="evaluateClick(order)"
              v-show="order.status==5"
            >查看评价</el-button>
            <el-button
              class="baseBut bg_base center_but"
              @click="viewReasonClick(order.orderId)"
              v-show="order.status==6"
            >查看原因</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="emptyData_box FCC" v-show="list.length == 0">暂无数据</div>
    <!-- 内容 start -->
    <viewsReason :showTrue="viewsReasonShow" :orderId="orderId"></viewsReason>
  </div>
</template>

<script>
import viewsReason from "./viewReason";
import { orderList } from "../../../../../requestApi/order/safeguardOrder";
import { orderExport } from "../../../../../requestApi/order/order";
/* 接口  end  */
export default {
  components: {
    viewsReason
  },
  props: ["queryList", "list"],

  data() {
    return {
      isIndeterminate: false,
      checkAll: false,
      checked: false,
      orderId: null,
      viewsReasonShow: { value: false },

      tabs: [
        {
          tabName: "全部订单",
          status: "",
          show: true
        },

        {
          tabName: "未付款",
          status: 1,
          show: ""
        },
        {
          tabName: "已付款",
          status: 2,
          show: ""
        },
        {
          tabName: "未发货",
          status: 3,
          show: ""
        },
        {
          tabName: "已发货",
          status: 4,
          show: ""
        },
        {
          tabName: "交易成功",
          status: 5,
          show: ""
        },
        {
          tabName: "交易关闭",
          status: 6,
          show: ""
        },
        {
          tabName: "待评价",
          status: 7,
          show: ""
        }
      ]
    };
  },
  created: function() {},
  mounted() {},
  computed: {},
  methods: {
    /* 点击tab start */
    handelClickTabs(item) {
      if (!item.show) {
        this.tabs.forEach(e => {
          e.show = false;
        });
        // this.queryList.status=item.status
        this.$emit("tabStatus", item.status);
        item.show = true;
      }
      /* 点击tab  end  */
    },
    // 订单详情
    handelDetail(orderId) {
      this.$router.push({ path: "detail", query: { orderId: orderId } });
    },

    /* 修改价格 取消订单 批量打印 start */
    editPriceClick(item) {
      this.$emit("editPrice", item);
    },
    cancelPriceClick(item) {
      this.$emit("cancelPrice", item);
    },
    printsClick() {
      let arr = this.list.map(e => {
        return e.orderId;
      });
      let orderIds = arr.join(",");
      this.$emit("prints", orderIds);
    },
    printClick(item) {
      this.$emit("print", item);
    },
    /* 查看物流 start */
    setShipClick(orders) {
      console.log(orders);

      this.$router.push({ path: "setShip", query: { order: orders } });
    },
    /* 查看物流  end  */

    // 查看原因
    viewReasonClick(item) {
      this.orderId = item;
      this.viewsReasonShow.value = true;
    },
    /* 查看评价 start */
    evaluateClick(order) {
      this.evaluateShow.value = true;
    },
    /* 查看评价  end  */
    /* 批量导出  start */
    exportClick() {
      this.orderExportFun();
    },
    async orderExportFun() {
      let params = {
        startDate: "2020-05-01",
        endDate: "2020-05-18",
        grade: sessionStorage.getItem("grade"),
        status: 1
      };
      let resp = await orderExport(params);
      if (resp.status == 200 && resp.data) {
        let headers = resp.headers;
        let contentType = headers["content-type"];
        const blob = new Blob([resp.data], { type: contentType });
        const contentDisposition = resp.headers["content-disposition"];
        let fileName = "unknown";
        if (contentDisposition) {
          fileName = window.decodeURI(
            resp.headers["content-disposition"].split("=")[1]
          );
        }
        let link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob); // 创建下载的链接
        link.download = fileName; // 下载后文件名
        link.style.display = "none";
        document.body.appendChild(link);
        link.click(); // 点击下载
        window.URL.revokeObjectURL(link.href); // 释放掉blob对象
        document.body.removeChild(link); // 下载完成移除元素
      } else {
        this.$message({
          type: "error",
          message: "系统开小差！"
        });
      }
    }
    /* 批量导出  end */
  },
  filters: {
    /* 支付方式过滤器 start */
    payTypeFil(val) {
      if (val == 0) {
        return "支付宝";
      } else if (val == 1) {
        return "微信";
      } else if (val == 2) {
        return "银联";
      }
    }

    /* 支付方式过滤器  end  */
  },
  watch: {}
};
</script>

<style  scoped>
.tableBox {
  padding: 20px;
  float: none;
}
/* tab  satrt*/
.tabs {
  display: flex;
  width: 536px;
  height: 30px;
  justify-content: space-between;
  margin-bottom: 16px;
  float: left;
}
.all_order_top::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.tabs li {
  cursor: pointer;
}

.tabs li div {
  position: relative;
  bottom: -8px;
  width: 36px;
  height: 2px;
  background: rgba(235, 68, 38, 1);
  content: "";
  margin: auto;
}

.buttonGroup {
  display: flex;
  float: right;
  width: 264px;
  justify-content: space-between;
}
.pad {
  position: relative;

  border: 1px solid rgba(235, 68, 38, 1) !important;
  color: rgba(235, 68, 38, 1);
  background: #ffff;
  width: 116px;
  height: 32px;
}
/* tab  end*/

/* table  start */
.all_order_header {
  height: 48px;
  background: rgba(255, 239, 234, 1);
  border: 1px solid rgba(255, 215, 203, 1);
  text-align: center;
  margin-bottom: 10px;
}
.all_order_check {
  width: 10.7%;
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
}

.all_order_goods {
  width: 23.7%;
}
.all_order_number {
  width: 10.7%;
}
.all_order_price {
  width: 8.57%;
}
.all_order_person {
  width: 12.5%;
}
.all_order_total {
  width: 9.46%;
}
.all_order_status {
  width: 9.46%;
}
.all_order_handel {
  width: 14%;
}
.all_order_content {
  margin-bottom: 10px;
}
.all_order_cpntent_header {
  height: 36px;
  background: rgba(245, 246, 250, 1);
  border: 1px solid rgba(235, 238, 243, 1);
  padding: 0 20px 0;
  box-sizing: border-box;
  color: rgba(45, 55, 62, 1);
  line-height: 20px;
}
.all_order_child_check {
}

/* table   end */
.all_order_date {
  margin-left: 10px;
  margin-right: 50px;
  color: rgba(45, 55, 62, 1);
  font-weight: 500;
}
.all_order_orderId {
  margin-right: 50px;
}

.all_order_detail {
  font-weight: 400;
  color: rgba(235, 68, 38, 1);
  cursor: pointer;
  width: 13%;
  text-align: center;
  /* flex: 1;
   text-align: right; */
  margin-left: auto;
}
.all_order_content_Box {
  padding: 15px 20px 0px 20px;
  border: 1px solid rgba(238, 240, 245, 1);
  box-sizing: border-box;
  text-align: center;
  line-height: 22px;
}
.all_order_content_alone {
  flex-wrap: wrap;
  width: 53.67%;
}
.all_order_content_v {
  width: 100%;
  padding: 0px 0 15px 0;
}
.all_order_img {
  width: 20%;
}
.all_order_img img {
  display: block;
  width: 80px;
  height: 80px;
}
.all_order_title_box {
  width: 44%;
}
.all_order_title {
  margin-left: 20px;
  width: 220px;
  height: 44px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 22px;
}
.all_order_unit_price {
  color: rgba(235, 68, 38, 1);
  width: 16%;
}
.all_order_unit_number {
  width: 20%;
}
.all_order_content_comment {
  width: 45.42%;
}
.all_order_person_info {
  width: 30.5%;
}
.all_order_total_price {
  color: rgba(235, 68, 38, 1);
  width: 20.8%;
}
.all_order_total_status {
  width: 20.8%;
}
.all_order_handel_button {
  width: 30.8%;
}
.center_but {
  display: block;
  margin: 0 auto 10px;
  position: relative;
  left: 20px;
}
.all_order_payType {
  color: rgba(45, 55, 62, 1);
}
.emptyData_box {
  width: 100%;
  height: 130px;
  font-size: 20px;
  color: #ccc;
}
</style>